<template>

    <form class="login_form" @submit.prevent="submit">
        <label v-if="type == 'reg'">
            <input :maxlength="64" placeholder="Full name" v-model="data.fullname" :class="tipData.fullname != '' && 'error-boder'" @blur="checkData('fullname')" />
            <em>{{ this.tipData.fullname }}</em>
        </label>
        <label>
            <input placeholder="Email" v-model="data.email" :class="tipData.email != '' && 'error-boder'" onkeyup="this.value=this.value.replace(/(\s*)/g,'')" @blur="checkData('email')" />
            <em>{{ this.tipData.email }}</em>
        </label>
        <label>
            <input :maxlength="64" placeholder="Password" v-model="data.psw" :type="!suffixShow ? 'text' : 'password'" :class="tipData.psw != '' && 'error-boder'" @blur="checkData('psw')" />
            <i v-if="suffixShow" class="iconfont icon-dakaiyincang" @click="suffixShow = false"></i>
            <i v-if="!suffixShow" class="iconfont icon-guanbiyincang" @click="suffixShow = true"></i>
            <em>{{ this.tipData.psw }}</em>
        </label>
        <button type="primary" v-text="(type == 'reg' && 'Sign up') || (type == 'login' && 'Sign in')"></button>
    </form>
</template>
<script>
export default {
    name: "LoginForm",
    props: ["data", "tipData", "type"],
    data () {
        return {
            suffixShow: true,
        };
    },
    watch: {
        type () {
            this.suffixShow = true;
        },
    },
    methods: {
        submit () {
            this.$emit("submit");
        },
        checkData (type) {
            this.$emit("checkData", this.type, this.data, type);
        },
    },
};
</script>
<style lang="scss" scoped>
.login_form {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 10px;
    > label {
        // display: inline-block;
        position: relative;
        height: 64px;
        > input {
            vertical-align: top;
        }
        > em {
            font-size: 12px;

            color: #f44336;
            line-height: 16px;
            position: absolute;
            bottom: 8px;
            left: 0;
        }
        > i {
            line-height: 20px;
            font-size: 20px;
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 14px;
        }
    }
    .submit {
        width: 100%;
        padding: 12px 0;
        font-size: 14px;
        text-align: center;
    }
}

.error-boder {
    border-color: #f44336;
}
</style>
